<template>
  <div>
    <!-- 顶部区域 -->
    <div class="wel__header">
      <div class="wel__info">
        <img :src="userinfo.headIcon" alt class="wel__info-img" :onerror="errorImg"/>
        <div class="wel__info-content">
          <div class="wel__info-title">
            {{ this.userinfo.realName }}, 欢迎登入系统
          </div>
          <div class="wel__info-subtitle">工号：{{ this.userinfo.enCode }}</div>
        </div>
      </div>
      <div class="wel__extra">
        <div class="wel__extra-item">
          <p class="wel__extra-title">数据统计时区</p>
          <p class="wel__extra-subtitle">
            <rayd-select options="StatisticalTime" v-model="Time" @change="init"></rayd-select>
          </p>
        </div>
      </div>
    </div>
    <!-- DataTabs 数据展示 -->
    <avue-data-tabs :option="tabsOption"></avue-data-tabs>
    <!-- map 地图 -->
    <div class="echarts-item">
      <div class="content-title">订单分布</div>
      <ve-map :data="mapData" :settings="mapSettings"></ve-map>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { LJ_MallOrder,LJ_OrderCancel,LJ_OrderRefound } from "@/api";
export default {
  name: "wel",
  data() {
    return {
      //错误显示头像
      errorImg: 'this.src="' + require("@/assets/images/default-avatar.png") + '"',
      Time: 5,
      LJ_MallOrder_Count: 0,
      LJ_OrderCancel_Count: 0,
      LJ_OrderRefound_Count: 0,
      mapSettings: {
        selectData:true,
        roam:true,
        aspectScale:1,
        labelMap: {
          'lj': '跨境电商'
        }
      }
    };
  },
  computed: {
    ...mapGetters(["userinfo"]),
    tabsOption() {
      return {
        span: 8,
        data: [
          {
            title: "订单统计",
            subtitle: "跨境电商",
            count: this.LJ_MallOrder_Count,
            text: "截止订单总记录数",
            color: "rgb(56, 161, 242)",
            key: "订",
            click: (item) => {
              this.$router.push('/CustomModule/LJ_MallOrder/Index')
            },
          },
          {
            title: "退款单统计",
            subtitle: "跨境电商",
            count: this.LJ_OrderRefound_Count,
            text: "截止退款单总记录数",
            color: "rgb(27, 201, 142)",
            key: "退",
            click: (item) => {
              this.$router.push('/CustomModule/LJ_OrderRefound/Index')
            },
          },
          {
            title: "撤销单统计",
            subtitle: "跨境电商",
            count: this.LJ_OrderCancel_Count,
            text: "截止撤销单总记录数",
            color: "rgb(230, 71, 88)",
            key: "撤",
            click: (item) => {
              this.$router.push('/CustomModule/LJ_OrderCancel/Index')
            },
          },
        ],
      };
    },
    mapData() {
      return {
        columns: ['province', 'lj'],
        rows: [
          { 'province': '广东', 'lj': 3 },
        ]
      }
    }
  },
  created() {
    //初始化
    this.init();
  },
  methods: {
    //初始化
    init() {
      this.$store.commit("SET_ISLOADING",true);
	    /* 初始化数据源 */
      Promise.all([
          LJ_MallOrder.GetCount(this.Time).then(res=>{
            this.LJ_MallOrder_Count = res;
          }),
          LJ_OrderCancel.GetCount(this.Time).then(res=>{
            this.LJ_OrderCancel_Count = res;
          }),
          LJ_OrderRefound.GetCount(this.Time).then(res=>{
            this.LJ_OrderRefound_Count = res;
          })
        ]).then(() => {
        this.$store.commit("SET_ISLOADING",false);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.wel {
  &__header {
    padding: 25px 40px;
    border-bottom: 1px solid #e8e8e8;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &__info {
    display: flex;
    align-items: center;
    &-img {
      border-radius: 72px;
      display: block;
      width: 72px;
      height: 72px;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    &-content {
      position: relative;
      margin-left: 24px;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
    }
    &-title {
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 12px;
    }
    &-subtitle {
      position: relative;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
    }
  }
  &__extra {
    &-item {
      position: relative;
      padding: 0 32px;
      display: inline-block;
      &:last-child {
        &::after {
          display: none;
        }
      }
      &:after {
        background-color: #e8e8e8;
        position: absolute;
        top: 30px;
        right: 0;
        width: 1px;
        height: 40px;
        content: "";
      }
    }
    &-title {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 4px;
    }
    &-subtitle {
      color: rgba(0, 0, 0, 0.85);
      font-size: 30px;
      line-height: 38px;
      margin: 0;
      span {
        color: rgba(0, 0, 0, 0.45);
        font-size: 20px;
      }
    }
  }
}

.echarts-item {
  padding: "16px";
  text-align: center;
  border-top: 1px solid #e8e8e8;
}
.content-title {
  clear: both;
  font-weight: 400;
  line-height: 50px;
  padding: 10px 10px;
  font-size: 22px;
  color: #1f2f3d;
}
</style>
